<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %> 
    <style>
    	table.table-hover tr{
    	cursor:pointer;
    	}
    
    </style>
<div class="row" style="margin:100px 0px;">

	<div class="col-xs-2" >
	</div>
	
	<div class="col-xs-4" >
		<button class="btn btn-sm btn-info" onclick="addMainType()"><span class="glyphicon glyphicon-plus"></span>增加主分类</button>
		<br>
		<br>
		<table class="table table-hover" >
		  <a href="#" class="list-group-item active">
		    主分类
		  </a>
		  <tbody id="mainTypeArea" style="border-width:1px;border-style:solid;border-color:#337AB7;">
		  <c:forEach items="${mainTypes}" var="mainType" varStatus="st"  >
    		<tr class='trMainId'><input type="hidden" value="${mainType.id}">
		        <td colspan="2">${mainType.descri}</td> 
		        <td><a><span class="glyphicon glyphicon-edit editMainType"></span></a></td> 
		        <td><a><span class="glyphicon glyphicon-trash deleteMainType"></span></a></td> 
		     </tr>
		</c:forEach>
	  </tbody>
	</table>
	</div>
	<div id="divOtherTypeArea" class="col-xs-4" style="display:none;">
		<button class="btn btn-sm btn-info" onclick="addOtherType()"><span class="glyphicon glyphicon-plus"></span>增加分区分类</button>
			<br>
			<br>
		<table class="table table-hover" >
		  <a href="#" class="list-group-item active">
		    分区分类
		  </a>
		  <tbody id="otherTypeArea" style="border-width:1px;border-style:solid;border-color:#337AB7;">
	 	 </tbody>
	</table>
	</div>
	<input id="showMainTypeId" type="hidden">
</div>
<script>
//主分类下的删除
$("body").on("click",".deleteMainType",function(){
	var isConfirm = confirm("确认删除？这将会删除该分类与分类下所有分区");
	if(isConfirm){
		var $tr = $(this).parent().parent().parent();
		var id = $($tr).children().eq(0).val();
		$.ajax({
			url:"admin_subCategory_deleteMaintype",
			type:"post",
			data:{id:id},
			dataType:"json",
			success:function(data){
				$($tr).remove();
			},
			error:function(data){
			}
		});
	}
});

/**
 * 主分类增加按钮
 */
//点击增加按钮的操作
function addMainType(){
	var htmlStr = "<tr>";
	htmlStr+=" <td colspan='2'><input class='form-control'  type='text'></td> ";
	htmlStr+="<td><button class='btn btn-sm btn-success subAdd'><span class='glyphicon glyphicon-ok'></span></button></td>";
	htmlStr+=" <td><button class='btn btn-sm btn-danger delAdd' ><span class='glyphicon glyphicon-remove'></span></button></td>";
	htmlStr+="</tr>";
	$("#mainTypeArea").append(htmlStr);
}

/**
 * 主分类增加部分
 */
//增加时点击删除按钮，删除此元素
$("body").on("click",".delAdd",function(){
	$(this).parent().parent().remove();
});
//增加时点击增加按钮，传输数据到后台
$("body").on("click",".subAdd",function(){
	var descri = $(this).parent().siblings().eq(0).children().eq(0).val();
	var addMainTypeArea = $(this).parent().parent();
	$.ajax({
		url:"admin_subCategory_addMaintype",
		type:"post",
		data:{descri:descri},
		dataType:"json",
		success:function(data){
			var mainType = data;
			var htmlStr = "<input type='hidden' value='"+mainType.id+"'>";
			htmlStr+="<td colspan='2'>"+mainType.descri+"</td>";
			htmlStr+="<td><a><span class='glyphicon glyphicon-edit editMainType'></span></a></td>";
			htmlStr+="<td><a><span class='glyphicon glyphicon-trash deleteMainType'></span></a></td>";
			$(addMainTypeArea).html(htmlStr);
		}
		
	});
});

/**
 * 主分类下编辑操作
 */
//编辑时点击编辑按钮，切换框
$("body").on("click",".editMainType",function(){
	var $tr = $(this).parent().parent().parent();
	var id = $($tr).children().eq(0).val();
	var strMain = $($tr).children().eq(1).text();
	var htmlStr = "<input type='hidden' value='"+id+"'>";
	htmlStr+=" <td colspan='2'><input class='form-control'  type='text' value='"+strMain+"'></td> ";
	htmlStr+="<td><button class='btn btn-sm btn-success subUpdate'><span class='glyphicon glyphicon-ok'></span></button></td>";
	htmlStr+=" <td><button class='btn btn-sm btn-danger delUpdate'><span class='glyphicon glyphicon-remove'></span></button></td></tr>";
	$($tr).html(htmlStr);
});


//点击勾号的更新操作
$("body").on("click",".subUpdate",function(){
	var id = $(this).parent().siblings().eq(0).val();
	var descri = $(this).parent().siblings().eq(1).children().eq(0).val();
	var updateMainTypeArea = $(this).parent().parent();
	$.ajax({
		url:"admin_subCategory_updateMaintype",
		type:"post",
		data:{id:id,descri:descri},
		dataType:"json",
		success:function(data){
			var mainType = data
			var htmlStr = "<input type='hidden' value='"+mainType.id+"'>";
			htmlStr+="<td colspan='2'>"+mainType.descri+"</td>";
			htmlStr+="<td><a><span class='glyphicon glyphicon-edit editMainType'></span></a></td>";
			htmlStr+="<td><a><span class='glyphicon glyphicon-trash deleteMainType'></span></a></td>";
			$(updateMainTypeArea).html(htmlStr);
		}
		
	});
});

//点击X号时退回原来状态
$("body").on("click",".delUpdate",function(){
	var id = $(this).parent().siblings().eq(0).val();
	var descri = $(this).parent().siblings().eq(1).children().eq(0).val();
	var updateMainTypeArea = $(this).parent().parent();
	var htmlStr = "<input type='hidden' value='"+id+"'>";
	htmlStr+="<td colspan='2'>"+descri+"</td>";
	htmlStr+="<td><a><span class='glyphicon glyphicon-edit editMainType'></span></a></td>";
	htmlStr+="<td><a><span class='glyphicon glyphicon-trash deleteMainType'></span></a></td>";
	$(updateMainTypeArea).html(htmlStr);
});
</script>
<script>
//当行被点击时，更换存储的maintypeid，获取id值，传输到后台加载数据
$("body").on("click",".trMainId",function(){
	initRoleSelected();
	$(this).addClass("active");
	$("#divOtherTypeArea").hide(50);
	var idStr = $(this).children().eq(0).val();
	$("#otherTypeArea").empty();
	$("#showMainTypeId").val(idStr);
	$("#divOtherTypeArea").show(500);
	$.ajax({
		url:"admin_subCategory_listOtherType?id="+idStr,
		contentType:"json",
		success:function(data){
			console.log(data);
			var otherTypes = data;
			if(otherTypes.length==0){
				$("#otherTypeArea").append("<div id='3'>此分类下暂无数据</div>");
			}
			for(var i=0;i<otherTypes.length;i++){
				var htmlStr = "<tr><input type='hidden' value='"+otherTypes[i].id+"'>";
				htmlStr+="<td colspan='2'>"+otherTypes[i].descri+"</td>";
				htmlStr+="<td><a><span class='glyphicon glyphicon-edit editOtherType'></span></a></td>";
				htmlStr+="<td><a><span class='glyphicon glyphicon-trash deleteOtherType'></span></a></td></tr>";
				$("#otherTypeArea").append(htmlStr);
			}
		}
	});
});
/**
 * 增加
 */
//当点击增加按钮时
function addOtherType(){
	$("#3").remove();
	var htmlStr = "<tr>";
	htmlStr+=" <td colspan='2'><input class='form-control'  type='text'></td> ";
	htmlStr+="<td><button class='btn btn-sm btn-success subAddOther'><span class='glyphicon glyphicon-ok'></span></button></td>";
	htmlStr+=" <td><button class='btn btn-sm btn-danger delAddOther' ><span class='glyphicon glyphicon-remove'></span></button></td>";
	htmlStr+="</tr>";
	$("#otherTypeArea").append(htmlStr);
}
//当点击增加勾号时
$("body").on("click",".subAddOther",function(){
	var descri = $(this).parent().siblings().eq(0).children().eq(0).val();
	var addOtherTypeArea = $(this).parent().parent();
	var foreginkey = $("#showMainTypeId").val();
	$.ajax({
		url:"admin_subCategory_addOthertype",
		type:"post",
		data:{descri:descri,foreginkey:foreginkey},
		dataType:"json",
		success:function(data){
			var otherType = data;
			var htmlStr = "<input type='hidden' value='"+otherType.id+"'>";
			htmlStr+="<td colspan='2'>"+otherType.descri+"</td>";
			htmlStr+="<td><a><span class='glyphicon glyphicon-edit editOtherType'></span></a></td>";
			htmlStr+="<td><a><span class='glyphicon glyphicon-trash deleteOtherType'></span></a></td>";
			$(addOtherTypeArea).html(htmlStr);
		}
		
	});
});
//当点击取消时删除此元素
$("body").on("click",".delAddOther",function(){
	$(this).parent().parent().remove();
});

/**
 * 编辑
 */

//当点击编辑时
$("body").on("click",".editOtherType",function(){
	var $tr = $(this).parent().parent().parent();
	var id = $($tr).children().eq(0).val();
	var strOther = $($tr).children().eq(1).text();
	var htmlStr = "<input type='hidden' value='"+id+"'>";
	htmlStr+=" <td colspan='2'><input class='form-control'  type='text' value='"+strOther+"'></td> ";
	htmlStr+="<td><button class='btn btn-sm btn-success subUpdateOther'><span class='glyphicon glyphicon-ok'></span></button></td>";
	htmlStr+=" <td><button class='btn btn-sm btn-danger delUpdateOther'><span class='glyphicon glyphicon-remove'></span></button></td></tr>";
	$($tr).html(htmlStr);
});

//当点击编辑更新时
$("body").on("click",".subUpdateOther",function(){
	var id = $(this).parent().siblings().eq(0).val();
	var foreginkey = $("#showMainTypeId").val();
	var descri = $(this).parent().siblings().eq(1).children().eq(0).val();
	var updateOtherTypeArea = $(this).parent().parent();
	$.ajax({
		url:"admin_subCategory_updateOthertype",
		type:"post",
		data:{id:id,descri:descri,foreginkey:foreginkey},
		dataType:"json",
		success:function(data){
			var otherType = data
			var htmlStr = "<input type='hidden' value='"+otherType.id+"'>";
			htmlStr+="<td colspan='2'>"+otherType.descri+"</td>";
			htmlStr+="<td><a><span class='glyphicon glyphicon-edit editOtherType'></span></a></td>";
			htmlStr+="<td><a><span class='glyphicon glyphicon-trash deleteOtherType'></span></a></td>";
			$(updateOtherTypeArea).html(htmlStr);
		}
		
	});
});
//当点击取消编辑时
$("body").on("click",".delUpdateOther",function(){
	var id = $(this).parent().siblings().eq(0).val();
	var descri = $(this).parent().siblings().eq(1).children().eq(0).val();
	var updateOtherTypeArea = $(this).parent().parent();
	var htmlStr = "<input type='hidden' value='"+id+"'>";
	htmlStr+="<td colspan='2'>"+descri+"</td>";
	htmlStr+="<td><a><span class='glyphicon glyphicon-edit editOtherType'></span></a></td>";
	htmlStr+="<td><a><span class='glyphicon glyphicon-trash deleteOtherType'></span></a></td>";
	$(updateOtherTypeArea).html(htmlStr);
});
/**
 * 当点击删除时
 */
 $("body").on("click",".deleteOtherType",function(){
		var isConfirm = confirm("确认删除？这将会删除该分区");
		if(isConfirm){
			var $tr = $(this).parent().parent().parent();
			var id = $($tr).children().eq(0).val();
			$.ajax({
				url:"admin_subCategory_deleteOthertype",
				type:"post",
				data:{id:id},
				dataType:"json",
				success:function(data){
					$($tr).remove();
				},
				error:function(data){
				}
			});
		}
	});
//清空主分类选择栏的选中状态
	function initRoleSelected(){
		$(".trMainId").each(function(){
			$(this).removeClass("active");
		});
	}
</script>